<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.new_reg{
				background-image: url("../homework-imgs/reg-mobile.jpg");
			    padding-top: 25px;
			    margin-top: 20px;
			    height: 660px
			
			}
			.div_d1{
				
				   width: 960px;
				   height: 50px;
				    margin-left: 66px;
					border: 0px solid black;
				
			}
			.div_d1 div{
				display: inline-block;
				height: 50px;
				width: 120px;
				text-align: center;
				line-height: 50px;
				background-color: white;
				
			}
			.left {
			    width: 608px;
				height: 447px;
			    padding-top: 55px;
			    padding-left: 40px;
				background-color: white;
				margin-left: 66px;
			}
			#email,#nickname,#pwd,#repwd{
				width: 314px;
				background-image: url("../homework-imgs/login-input4.png");
				background-position: 10px center;
				background-repeat: no-repeat;
				border: 1px solid gray;
			}
			#yanzh{
				width: 222px;
				background-image: url("../homework-imgs/login-input4.png");
				background-position: 10px center;
				background-repeat: no-repeat;
				border: 1px solid gray;
			}
			#botton{
				width: 117px;
				border: 1px solid gray;
				margin-left: 8px;
				
			}
			#botton_zhece{
				margin-left: 150px;
				width: 200px;
				height: 40px;
				text-align: center;
				background-color: #2361B4;
				color: white;
				padding: 0;
				border: 1px solid gray;
			}
			#checkCode{
				padding: 0;
				text-align: center;
				width: 143px;
			}
			
			p span{
				color: #B4B4B4;
			}
			
			input{
				padding-left: 35px;
				padding-top: 0;
				padding-bottom: 0;
				height: 42px;
			}
			form{
				font-size: 12px;
			}
			
			a:link{
				text-decoration-line: none;
				background-color: #2361B4;
				/* color: white; */
				color: #2361B4;
			}
			a:visited{
				text-decoration-line: none;
				background-color: white;
				color: #2361B4;
			}
			
		</style>
		<script >
					var code; //在全局 定义验证码 
					  window.onload=createCode();
					function createCode() {
						code = "";
						
						var codeLength = 4; //验证码的长度   
						var checkCode = document.getElementById("checkCode");
						var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',
							'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的      
						for (var i = 0; i < codeLength; i++) {
							var charIndex = Math.floor(Math.random() * 36);
							code += selectChar[charIndex];
						}
						if (checkCode) {
							checkCode.className = "code";
							checkCode.value = code;
							checkCode.blur();
						}
					}
		
					function validate() {
						var inputCode = document.getElementById("validCode").value;
				 	    if (inputCode.length <= 0) {
							alert("请输入验证码！");
						} else if (inputCode.toUpperCase() != code) {
							alert("验证码输入错误！");
							createCode(); //刷新验证码   
						} else {
							alert("验证成功!");
						}
					}
					
					function pw(){
						var pwd=document.getElementById("pwd").value;
						var repwd=document.getElementById("repwd").value;
						if(repwd==0){
							alert("再次输入密码！")
							return;
						}
						if(pwd!=repwd){
							document.getElementById("repwd").value="";
							alert("密码不一致，重新输入！")
						}
					}
				</script>
	</head>
	<body>
		<div class="new_reg">
			<div class="div_d1">
				<div><a href="#" >手机注册</a></div>
				<div><a href="#">邮箱注册</a></div>
			
			</div>
			<div class="left">
				<form action="zhuce.html" method="GET">
					
						<p>
							
							<input type="text" name="email" id="email" placeholder="请输入您的常用邮箱" required>
							<span>请输入您的常用邮箱</span>
							
						</p>
						<p>
							
							<input type="text" name="uname" id="nickname" placeholder="请输入昵称" required >
							<span>4-12位字符、英文、数字或者中文均可</span>
							
						</p>
						<p>
							
							<input type="password" name="password" id="pwd" placeholder="请输入密码" required>
							<span>6-16位字符、字母，区分大小写</span>
							
						</p>
						<p>
							
							<input type="password" name="checkpassword" id="repwd" placeholder="请再次输入密码" required onblur="pw()">
							
						</p>
						<p> 
							<input id="validCode" type="text" name="yzm" id="yanzh" required placeholder="请输入右侧验证码" onblur="validate()"/>
							<input type="text" onClick="createCode()" readonly="readonly" id="checkCode"/>
							
							<span>不区分大小写，点击图片可更换</span>
						</p>
				
					<p style="padding-left: 156px;"> 
						
						<label >
							<input type="checkbox" name="agree" value="yes" style="height: 10px;" >
							同意
							<a href="#">用户服务条款</a>
						</label>
						
					</p>
					<p>
						<input type="submit" value="注册" id="botton_zhece" onclick="pw() "/>
					</p>
					
				</form>
			</div>
		</div>
	</body>
</html>
